<template>
  <div id="add_role_id">
    <el-dialog
      :title="form.id === 0 ? '添加角色' : '修改角色'"
      :visible.sync="isShow.flag"
      width="50%"
      :before-close="handlerclose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="text-align: left"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="form.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="menu_list"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            ref="tree_ref"
            :default-checked-keys="checked_keys"
          >
          </el-tree>
        </el-form-item>

        <el-form-item label="角色状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerclose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["isShow"],
  data() {
    return {
      form: {
        id: 0,
        status: 1,
        rolename: "",
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        status: {
          required: true,
          message: "请确定角色的状态",
          trigger: "blur",
        },
        rolename: {
          required: true,
          message: "请输入角色名称",
          trigger: "blur",
        },
      },
      checked_keys: [],
    };
  },
  created() {
    this.MenuListAction();
  },
  methods: {
    handlerclose() {
      this.form = {
        id: 0,
        status: 1,
        rolename: "",
      };
      this.isShow.flag = false;
    },
    setForm(obj) {
      this.form.rolename = obj.rolename;
      this.form.id = obj.id;
      this.form.status = obj.status;
      this.checked_keys = obj.menus.split(",");
    },
    submit() {
      //整理表单数据
      var menus = this.$refs.tree_ref.getCheckedKeys().join(",");
      var sendData = {
        ...this.form,
        menus,
      };
      var url = "";
      if (this.form.id === 0) {
        url = "/api/roleadd";
      } else {
        url = "/api/roleedit";
      }
      //提交请求
      this.$http.post(url, sendData).then((res) => {
        if (res.code == 200) {
          this.isShow.flag = false; //关闭模态框
          //清空表单
          this.form = {
            id: 0,
            status: 1,
            rolename: "",
          };
          this.$refs.tree_ref.setCheckedKeys([]);
          //通知父组件刷新表单
          this.$emit("reload_role");
        }
      });
    },
    ...mapActions("MenuStore", ["MenuListAction"]),
  },
  computed: {
    ...mapState({ menu_list: (state) => state.MenuStore.menuList }),
  },
};
</script>

<style>
</style>